<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>Mobilebone.js API文档-data-rel</title>
<link rel="stylesheet" href="../src/mobilebone.css">
<link rel="stylesheet" href="docs.css">
</head>

<body>
<aside></aside>
<div class="page out">
	<div class="content">
    	<h2>data-rel</h2>
        <p>主要使用为下面2个值<code>"back"</code>和<code>"auto"</code>。主要作用是决定过场的方向，默认都是正向过场，例如<code>slideup</code>效果，是从下面出来。如果是<code>"back"</code>，就会从上面出现。有时候，我们无法确定过场的方向，例如，本文档页面左侧的各个链接，因为点击顺序任意的，此时就可以使用<code>"auto"</code>，也就是：</p>
        <pre>&lt;a href="Mobilebone.support.html" class="nav-a" data-mask <span style="color:#cd0000;">data-rel="auto"</span>>Mobilebone.support&lt;/a></pre>
        <p>此时，Mobilebone会根据对应<code>page</code>页面的前后顺序确定其正向过场还是反向。</p>
        <h3>其他说明</h3>
        <ol>
        	<li><code>data-rel="back"</code>在以前两种场景都是有返回效果的。
            	<pre>&lt;a href="#pageBack" <span style="color:#cd0000;">data-rel="back"</span>>返回&lt;/a></pre>
                <pre>&lt;a href="javascript:" <span style="color:#cd0000;">data-rel="back"</span>>返回&lt;/a></pre>
                <p>那它们的差别在什么地方呢？</p>
                <p>前者返回具有明确的目的性，知道前往的页面，虽然是返回，但是，<code>history</code>依然会push一条访问记录；而没有<code>href</code>的返回，也就是后者只会返回上一次的页面，其作用跟下面代码一样：</p>
                <pre>&lt;a href="javascript:history.back();">返回&lt;/a></pre>
                <p>真正意义上的浏览器返回，<code>history</code>回退至上一个记录，而不是再塞一条。所以，大家需要根据不同的返回场景做不同的处理。</p>
            </li>
        	<li>
            	<code>data-rel</code>其实还支持一个值，<code>"external"</code>. 作用和<code>data-ajax="false"</code>一致，感觉有些鸡肋，正犹豫要不要删掉，故没有放在上面讲。
            </li>
        </ol>
    </div>
</div>

<script src="../src/mobilebone.js"></script>
<script>
Mobilebone.captureLink = false;
window.navKey = "data-rel";
</script>
<script src="nav.js"></script>
<script src="docs.js"></script>
</body>
</html>
